<!DOCTYPE html>
<html>
<head>
    <title>抽奖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <style>
        body
        {
            background: #fbe3cc;
        }
        .g-content
        {
            width: 100%;
            height: auto;
            font-family: "微软雅黑" , "microsoft yahei";
        }
        .g-content .g-lottery-case
        {
            width: 500px;
            height: 445px;
            margin: 0 auto;
            overflow: hidden;
        }
        .g-content .g-lottery-case .g-left h2
        {
            font-size: 20px;
            line-height: 32px;
            font-weight: normal;
            margin-left: 20px;
        }
        .g-content .g-lottery-case .g-left
        {
            width: 450px;
            float: left;
        }
        .g-lottery-box
        {
            width: 400px;
            height: 400px;
            margin-left: 30px;
            position: relative;
            background: url(img/lottery/ly-plate-c.gif) no-repeat;
        }
        .g-lottery-box .g-lottery-img
        {
            width: 340px;
            height: 340px;
            position: relative;
            background: url(img/lottery/bg-lottery.png) no-repeat;
            left: 30px;
            top: 30px;
        }
        .g-lottery-box .playbtn
        {
            width: 186px;
            height: 186px;
            position: absolute;
            top: 77px;
            left: 77px;
            background: url(img/lottery/playbtn.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="g-content">
        <div class="g-lottery-case">
            <div class="g-left">
                <h2>
                    您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
                <div class="g-lottery-box">
                    <div class="g-lottery-img">
                        <a class="playbtn" href="javascript:;" title="开始抽奖"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="Top_Record" style="display:none;">
        <div class="record_Top">
            <p>
                摇奖排行榜</p>
        </div>
        <div class="topRec_List">
            <dl>
                <dd>
                    编号</dd>
                <dd>
                    姓名</dd>
                <dd>
                    奖项</dd>
                <dd>
                    时间</dd>
            </dl>
            <div class="maquee">
                <ul style="margin-top: -17.6649px;">
                    <li>
                        <div>
                            6</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            7</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            8</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            1</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            2</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            3</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            4</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                    <li>
                        <div>
                            5</div>
                        <div>
                            王**</div>
                        <div>
                            中了30元</div>
                        <div>
                            2014/12/30 14:20</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery.rotate.min.js"></script>
    <script>
        $(function () {
            var $btn = $('.playbtn');
            var playnum = 1; //初始次数，由后台传入
            $('.playnum').html(playnum);
            var isture = 0;
            var clickfunc = function () {
                var data = [1, 2, 3, 4, 5, 6];
                //data为随机出来的结果，根据概率后的结果
                var rd = Math.random();
                if (rd < 0.8)
                    data = 2 || 5;
                else
                    data = data[Math.floor(rd * data.length)];
                switch (data) {
                    case 1:
                        rotateFunc(1, 0, '恭喜您获得2000元理财金!');
                        break;
                    case 2:
                        rotateFunc(2, 60, '谢谢参与~再来一次吧~');
                        break;
                    case 3:
                        rotateFunc(3, 120, '恭喜您获得5200元理财金!');
                        break;
                    case 4:
                        rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
                        break;
                    case 5:
                        rotateFunc(5, 240, '谢谢参与~再来一次吧~');
                        break;
                    case 6:
                        rotateFunc(6, 300, '恭喜您获得1000元理财金!');
                        break;
                }
            }
            $btn.click(function () {
                if (isture) return; // 如果在执行就退出
                isture = true; // 标志为 在执行
                //先判断是否登录,未登录则执行下面的函数
                if (1 == 2) {
                    $('.playnum').html('0');
                    alert("请先登录");
                    isture = false;
                } else { //登录了就执行下面
                    if (playnum <= 0) { //当抽奖次数为0的时候执行
                        alert("没有次数了");
                        $('.playnum').html(0);
                        isture = false;
                    } else { //还有次数就执行
                        playnum = playnum - 1; //执行转盘了则次数减1
                        if (playnum <= 0) {
                            playnum = 0;
                        }
                        $('.playnum').html(playnum);
                        clickfunc();
                    }
                }
            });
            var rotateFunc = function (awards, angle, text) {
                isture = true;
                $btn.stopRotate();
                $btn.rotate({
                    angle: 0,
                    duration: 4000, //旋转时间
                    animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
                    callback: function () {
                        isture = false; // 标志为 执行完毕
                        alert(text);
                    }
                });
            };
        });
		</script>
</body>
</html>
